import React, { PureComponent } from 'react';

import { connect } from 'dva';
import Search from '../../components/Search';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import {downloadFile, goToRouter} from "@/utils/utils";
import CopyToClipboard from '@/components/CopyToClipboard';
import status from '@/config/status.config'
import { withShopStatus } from "@/utils/enum";

import {
  Table,
  Card,
  message,
  Button,
  Drawer,
  Form,
  Select,
  Spin,
  Divider,
} from 'antd';
import SplitBillService from "./services/splitBill";
import moment from "moment";

const detailsStatus = {
  '01': '待支付',
  '02': '支付中',
  // '03': '已支付申请关单',
  '04': '待发货',
  '05': '待确认收货',
  '06': '租用中',
  '07': '待结算',
  '08': '结算待支付',
  '09': '订单完成',
  '10': '交易关闭',
};

@connect()
@Form.create()
class NormalSplitBill extends PureComponent {
  state = {
    tableData: [],
    loading: true,
    arrStatus: ['0/正在审核', '1/审核不通过', '2/审核通过'],
    current: 1,
    pageNumber: 1,
    pageSize: 10,
    type: null,
    shopId: null,
    shopName: null,
    status: null,
    visible: false,
    spinning: false,
    filter: {}
  };
  
  columns = [
    { title: '订单编号', dataIndex: 'orderId',  width: 140,
      render: text => <CopyToClipboard text={text} />,
    },
    /* { title: '店铺名称', dataIndex: 'shopName', key: 'shopName', width: 120}, */
    { title: '结算期数/总期数', dataIndex: 'payedPeriods', width: 100,render: (text, record) => {
        return record.period + '/' + record.totalPeriod
      }},
    { title: '租金', dataIndex: 'userPayAmount',width: 80, render: text => text < 0? 0: text },
    { title: '状态', dataIndex: 'orderStatus', width: 80,
      render: text => detailsStatus[text],
    },
    { title: '支付时间', dataIndex: 'userPayTime',},
    { title: '账单到期时间', dataIndex: 'statementDate', render: text => text < 0? 0: text},
    { title: '商家结算金额', dataIndex: 'toShopAmount', render: text => text < 0? 0: text},
    { title: '平台佣金', dataIndex: 'toOpeAmount', render: text => text < 0? 0: text},
    { title: '与商家结算状态', dataIndex: 'status', render: text => withShopStatus[text]},
    { title: '结算人', dataIndex: 'name',},
    { title: '结算时间', dataIndex: 'createTime', key: 'crateTime'},
    { title: '操作', align: 'center', key: 'action',fixed: 'right',
      render: (text, record) => {
        return (
          <div className="table-action">
            <a onClick={()=> this.preview(record.id)}>
              查看
            </a>
          </div>
        );
      },
    },
  ];

  componentDidMount() {
    this.initData();
  }

  initData = () => {
    let payload = {
      pageNumber: this.state.pageNumber,
      pageSize: this.state.pageSize,
      ...this.state.filter,
    };
    this.setState(
      {
        loading: true,
      },
      () => {
        SplitBillService.rentPage(payload).then(res => {
          message.success('获取信息成功');
          this.setState({
            tableData: res.records,
            total: res.total,
            loading: false,
            current: res.current,
          });
        })
      },
    );
  };

  handleFilter = (data = {}) => {
    if (data.queryType && data.queryType === '分页') {
      this.initData();
    } else {
      this.setState(
        {
          pageNumber: 1,
          pageSize: 10,
          filter: data
        },
        () => {
          this.initData();
        },
      );
    }
  };
  
  handleExportData = (filter={}) => {
    if (filter.createDate && filter.createDate.length > 1) {
      filter.createTimeStart = moment(filter.createDate[0]).format('YYYY-MM-DD HH:mm:ss');
      filter.createTimeEnd = moment(filter.createDate[1]).format('YYYY-MM-DD HH:mm:ss');
    }
    SplitBillService.rentExport(filter).then(res => {
      // downloadFile(res)
      location.href = res
    })
  }

  //分页，下一页
  onChange = pageNumber => {
    this.setState(
      {
        pageNumber: pageNumber,
      },
      () => {
        this.handleFilter({ queryType: '分页' });
      },
    );
  };
  
  showTotal = () => {
    return `共有${this.state.total}条`;
  };
  
  //切换每页数量
  onShowSizeChange = (current, pageSize) => {
    this.setState({ pageSize: pageSize }, () => {
      this.handleFilter({ queryType: '分页' });
    });
  };
  
  preview = id => {
    this.setState(
      {
        visible: true,
        spinning: true,
      },
      () => {
        goToRouter(this.props.dispatch, '/finance/normal/detail/'+ id)
      },
    );
  };
  
  render() {
    const {loading, current, total, arrStatus, visible, spinning, tableData} = this.state;
    
    return (
      <PageHeaderWrapper>
        <Card bordered={false}>
          <Search needExport arrStatus={arrStatus} source={'常规订单'}
                  exportData={this.handleExportData}
                  handleFilter={this.handleFilter} />
        </Card>
        <Card bordered={false} style={{ marginTop: 20 }}>
          <Table
            scroll={{x: true}}
            columns={this.columns}
            loading={loading}
            dataSource={tableData}
            rowKey={record => record.id}
            pagination={{
              current: current,
              total: total,
              onChange: this.onChange,
              showTotal: this.showTotal,
              showQuickJumper: true,
              pageSizeOptions: ['5', '10', '20'],
              showSizeChanger: true,
              onShowSizeChange: this.onShowSizeChange,
            }}
          />
        </Card>
      </PageHeaderWrapper>
    );
  }
}

export default NormalSplitBill;
